<script lang="ts" setup>
import { tnNavPage } from "@tuniao/tnui-vue3-uniapp/utils";
import TnEmpty from "@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue";
import TnWaterFall from "@tuniao/tnui-vue3-uniapp/components/water-fall/src/water-fall.vue";
import ProductItem from "../product-item/index.vue";
import type { Banner } from "@/types/api/banner";
import type { Product } from "@/types/api/product";

defineProps<{
  paddingTop: number;
  banners: Banner[];
  products: Product[];
  isLoad: boolean;
}>();
</script>

// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
};
</script>
// #endif

<template>
  <view
    class="category-product-page"
    :style="{ paddingTop: `${paddingTop}px` }"
  >
    <!-- 商品信息 -->
    <view
      v-if="products?.length"
      class="product-list"
    >
      <TnWaterFall :data="products">
        <template #left="{ item }">
          <ProductItem :product="item" />
        </template>
        <template #right="{ item, index }">
          <!-- 广告位 -->
          <view
            v-if="index === 0"
            class="ad-content tn-gradient-bg__blue tn-shadow-blur"
            @tap.stop="tnNavPage('/home-page/tuniao-ecology/index')"
          >
            <view>导航 · 图鸟生态</view>
            <view>
              <text class="tn-mr-xs">看看都有什么</text>
              <TnIcon name="link" />
            </view>
          </view>
          <ProductItem :product="item" />
        </template>
      </TnWaterFall>
    </view>
    <!-- 无商品信息 -->
    <view
      v-else-if="isLoad"
      class="empty-product"
    >
      <TnEmpty>
        <template #icon>
          <view class="empty-icon">
            <TnIcon name="wea-wind" />
          </view>
        </template>
        <template #tips>
          <view class="empty-tips"> 内容被台风吹走了 </view>
        </template>
      </TnEmpty>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
